<template>
  <main-layout>
    <div class="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
      <h1 class="text-3xl font-bold text-gray-900 mb-8" v-motion-slide-visible-once-bottom>
        {{ $tm('order.title') }}
      </h1>

      <!-- 工艺选择 -->
      <div class="flex space-x-4 border-b mb-8" v-motion-slide-visible-once-left>
        <button v-for="(tech, key) in technologies" 
                :key="key"
                class="pb-4 flex items-center space-x-2 hover:text-red-500 transition-colors"
                :class="{'border-b-2 border-red-500': selectedTech === key}"
                @click="selectedTech = key">
          <component :is="tech.icon" class="w-6 h-6"/>
          <span>{{ $tm(`order.technologies.${key}`) }}</span>
        </button>
      </div>

      <!-- 上传区域 -->
      <div class="border-2 border-dashed border-gray-300 rounded-lg p-12 text-center mb-8" 
           v-motion-slide-visible-once-bottom>
        <div class="space-y-4">
          <div class="flex justify-center">
            <img src="../assets/parts-preview.png" class="h-24" alt="Parts preview"/>
          </div>
          <p>{{ $tm('order.upload.title') }}</p>
          <button class="bg-red-500 text-white px-6 py-3 rounded-lg hover:bg-red-600 transition-colors">
            {{ $tm('order.upload.button') }}
          </button>
          <p class="text-sm text-gray-500">
            {{ $tm('order.upload.formats') }}
            <br/>
            {{ $tm('order.upload.formatList') }}
            <br/>
            {{ $tm('order.upload.maxSize') }}
          </p>
        </div>
      </div>

      <!-- NDA说明 -->
      <div class="flex justify-between items-center mb-12" v-motion-slide-visible-once-bottom>
        <p class="text-sm">
          {{ $tm('order.nda.text') }}
          <a href="#" class="text-blue-500 hover:underline">{{ $tm('order.nda.link') }}</a>
          {{ $tm('order.nda.contact') }}
        </p>
        <div class="space-x-4">
          <button class="border px-4 py-2 rounded hover:bg-gray-50 transition-colors">
            {{ $tm('order.buttons.sample') }}
          </button>
          <button class="border px-4 py-2 rounded hover:bg-gray-50 transition-colors">
            {{ $tm('order.buttons.rfq') }}
          </button>
        </div>
      </div>

      <!-- 订单流程 -->
      <div class="py-10" v-motion-slide-visible-once-bottom>
        <h2 class="text-2xl font-bold mb-8">{{ $tm('order.steps.title') }}</h2>
        <div class="relative">
            <!-- 连接线 - 确保在数字图标的位置 -->
          <div class="absolute top-[calc(55%)] left-0 w-full h-1 bg-gray-200">
            <div class="absolute top-0 left-0 h-full bg-red-500 transition-all duration-1000"
                 :style="{ width: `${progressWidth}%` }">
            </div>
          </div>
          <!-- 步骤卡片 -->
          <div class="grid grid-cols-4 gap-8 relative">
            <div v-for="(step, key, index) in steps" 
                 :key="key" 
                 class="text-center group"
                 v-motion
                 :initial="{ opacity: 0, y: 50 }"
                 :enter="{ opacity: 1, y: 0, transition: { delay: index * 200 } }">
              <div class="flex flex-col items-center">
                <!-- 主图标区域 - 位于顶部 -->
                <div class="mb-16">
                  <div class="w-20 h-20 rounded-full bg-white border-4 border-gray-200 
                              flex items-center justify-center group-hover:border-red-500 
                              transition-colors duration-300">
                    <component :is="step.icon" 
                               class="w-10 h-10 text-gray-500 group-hover:text-red-500 
                                      transition-colors duration-300"/>
                  </div>
                </div>
                
                <!-- 数字图标和连接线区域 -->
                <div class="w-full h-10 relative mb-8">
                  <!-- 数字图标 -->
                  <div class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 
                              w-10 h-10 rounded-full bg-red-500 text-white font-bold
                              flex items-center justify-center border-4 border-white z-10">
                    {{ index + 1 }}
                  </div>
                </div>

                <!-- 文字内容区域 -->
                <div>
                  <h3 class="font-semibold mb-3  group-hover:text-red-500 ">{{ $tm(`order.steps.${key}.title`) }}</h3>
                  <p class="text-sm text-gray-600  group-hover:text-red-500 ">{{ $tm(`order.steps.${key}.desc`) }}</p>
                </div>
              </div>
            </div>
          </div>

          
        </div>
      </div>
    </div>
  </main-layout>
</template>

<script setup lang="ts">
import { ref, watch, computed } from 'vue'
import MainLayout from '../layouts/MainLayout.vue'
import { 
  CogIcon, 
  Square3Stack3DIcon, 
  BeakerIcon, 
  CubeIcon, 
  PrinterIcon,
  ArrowUpTrayIcon,
  DocumentTextIcon,
  WrenchScrewdriverIcon,
  TruckIcon
} from '@heroicons/vue/24/outline'

const selectedTech = ref('cnc')

const technologies = {
  cnc: { icon: CogIcon },
  sheet: { icon: Square3Stack3DIcon },
  injection: { icon: BeakerIcon },
  vacuum: { icon: CubeIcon },
  printing: { icon: PrinterIcon }
}

// 定义订单状态类型
type OrderStatus = 'upload' | 'quote' | 'production' | 'shipping'

// 步骤定义
const steps = {
  upload: { icon: ArrowUpTrayIcon, order: 1 },
  quote: { icon: DocumentTextIcon, order: 2 },
  production: { icon: WrenchScrewdriverIcon, order: 3 },
  shipping: { icon: TruckIcon, order: 4 }
} as const

// 当前订单状态
const currentStatus = ref<OrderStatus>('quote')

// 动态计算进度
const progressWidth = computed(() => {
  const totalSteps = Object.keys(steps).length
  const currentStep = steps[currentStatus.value].order
  return (currentStep / totalSteps) * 100
})

// 可选：添加更新状态的方法
const updateOrderStatus = (status: OrderStatus) => {
  currentStatus.value = status
}
</script>